<template>
  <div class="findpassword">
    <div class="findpassword-box">

      <div class="page-left" :style="{background: `${configData.bgColor}` }">
        <div class="logo-box">
          <!-- <img class="logo-img" src="../../static/imgs/logo.png" alt=""> -->
          <div class="title" :style="{color: `${configData.fontColor}` }"> {{ $t('assemble.欢迎来到网易标签订购系统') }}<span style="font-size:15px;">V2.0</span> </div>
          <div class="page-text" v-html="content">
          <!-- 每个行业都有自己相对特定的工具，工具也代表了这个行业的工作内容特点，这两年一直处于居家办公状态的我，对线上协同办公的产品要求会高很多，操作使用无门槛，交流沟通效率高、产品性能流畅强，很难去评价蓝湖产品的某项优点，因为它就是会在不断的重复使用的过程中冲击你的爽点。 -->
        </div>
        </div>
        
      </div>

      <div class="findpassword-content">
        <div class="findpassword-text">
          {{ $t('assemble.找回密码') }}
        </div>
        <div class="findpassword-bottom">

          <el-form :model="findForm" :rules="findrules" ref="findForm" label-width="100px" class="demo-ruleForm">
            <el-form-item prop="email">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.邮箱地址') }}</p>
                </div>
                <el-input class="input" v-model="findForm.email" :placeholder="$t('assemble.请输入')"></el-input>
              </div>
            </el-form-item>

            <el-form-item prop="authcode">
              <div class="content-box huoqu-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.验证码') }}</p>
                </div>

                <el-input v-model="findForm.authcode" :placeholder="$t('assemble.请输入')"></el-input>
                <div v-if="codeflag" class="gain" @click="handleSendcode">
                  {{ $t('assemble.获取') }}
                </div>
                <div v-else class="gain">
                  {{ time }}s
                </div>
              </div>
            </el-form-item>

            <el-form-item prop="newPassword">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.新密码') }}</p>
                </div>
                <el-input v-model="findForm.newPassword" :placeholder="$t('assemble.请输入')" show-password></el-input>
              </div>
            </el-form-item>

            <el-form-item prop="okPassword">
              <div class="content-box">
                <div class="content-text">
                  <p class="shu"></p>
                  <p>{{ $t('assemble.确认密码') }}</p>
                </div>
                <el-input v-model="findForm.okPassword" :placeholder="$t('assemble.请输入')" show-password></el-input>
              </div>
            </el-form-item>


          </el-form>
          <!-- <div class="content-box">
            <div class="content-text">
              <p class="shu"></p>
              <p>邮箱地址</p>
            </div>
            <el-input class="input" v-model="email" placeholder="请输入"></el-input>
          </div> -->
          <!-- <div class="content-box huoqu-box">
            <div class="content-text">
              <p class="shu"></p>
              <p>验证码</p>
            </div>

            <el-input v-model="authcode" placeholder="请输入"></el-input>
            <div v-if="codeflag" class="gain" @click="handleSendcode">
              获取
            </div>
            <div v-else class="gain">
              {{ time }}s
            </div>
          </div> -->
          <!-- <div class="content-box">
            <div class="content-text">
              <p class="shu"></p>
              <p>新密码</p>
            </div>
            <el-input v-model="newPassword" placeholder="请输入"></el-input>
          </div> -->
          <!-- <div class="content-box">
            <div class="content-text">
              <p class="shu"></p>
              <p>确认密码</p>
            </div>
            <el-input v-model="okPassword" placeholder="请输入"></el-input>
          </div> -->

          <div class="login-btn" @click="subpassword">{{ $t('assemble.找回密码') }}</div>

        </div>
      </div>


    </div>
  </div>
</template>

<script>
import { sendcode, check, findresetpwd, onepage } from '../../utils/api'

export default {
  data() {
    return {
      findForm: {
        email: '',
        authcode: '',//验证码
        newPassword: '',//新密码
        okPassword: '',//确认密码
      },
      findrules: {
        email: [
          { required: true, message:this.$t('assemble.请输入邮箱地址'), trigger: 'blur' },
        ],
        authcode: [
          { required: true, message: this.$t('assemble.请输入验证码'), trigger: 'blur' },
        ],
        newPassword: [
          { required: true, message: this.$t('assemble.请输入新密码'), trigger: 'blur' },
        ],
        okPassword: [
          { required: true, message: this.$t('assemble.请确认密码'), trigger: 'blur' },

        ]
      },
      codeflag: true,
      time: 60,
      // email: '',
      // authcode: '',//验证码
      // newPassword: '',//新密码
      // okPassword: '',//确认密码
      content: "",
      configData: {},
    }
  },
  mounted() {
    this.genAboutus()
    this.configData = JSON.parse(localStorage.getItem('config'))
  },
  methods: {
    async genAboutus() {
      let res = await onepage({
        name: "loginbeief"
      })
      if (res.code == 1) {
        console.log("关于我们", res)
        this.content = res.data
      }
      if (res.code == 401) {
        this.$router.push({ path: '/login' })
      }

    },

    async handleSendcode() {
      const that = this

      let res = await sendcode({
        email: that.findForm.email,
        event: 'resetpwd'
      })
      if (res.code == 1) {
        this.$message({
          message: this.$t('assemble.验证码发送成功'),
          type: 'success'
        });
        that.codeflag = false
        const interval = window.setInterval(function () {
          if ((that.time--) <= 0) {
            that.time = 60
            that.codeflag = true
            window.clearInterval(interval)
          }
        }, 1000)

      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      }


    },
    async subpassword() {
      let data = {
        email: this.findForm.email,
        password: this.findForm.newPassword,
        captcha: this.findForm.authcode
      }
      console.log("33333", data)
      let res = await findresetpwd(data)
      console.log("忘记密码", res)
      if (res.code == 1) {
        this.$message({
          message: res.msg,
          type: 'resetpwd'
        });

        this.$router.push({ path: '/login' })
      } else {
        this.$message({
          message: res.msg,
          type: 'resetpwd'
        });
      }



      if (res.code == 401) {
        this.$router.push({ path: '/login' })
      }


    },
  }
}
</script>

<style scoped lang="scss">
.findpassword {
  width: 100vw;
  height: 100vh;
  background: #F8F8F8;
  border-radius: 0px 0px 0px 0px;

  .findpassword-box {
    display: flex;
    align-items: center;

    .page-left {
      width: 400px;
      height: 100vh;
      // background: #E00000;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      // padding: 434px 100px;
      box-sizing: border-box;

      .logo-box {
        // width: 158.42px;
        width: 100%;
        height: 56px;
        margin-top: 400px;
        

        .title {
          // width: 387px;
          height: 21px;
          font-size: 20px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: white;
          line-height: 28px;
          font-weight: bolder;
          width: 100%;
          text-align: center;
        }

        .logo-img {
          width: 100%;
          height: 100%;
        }
      }

      .page-text {
        font-size: 15px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 28px;
        margin-top: 30px;
        width: 100%;
        text-align: center;

      }
    }

    .findpassword-content {
      width: 500px;
      height: 559px;
      background: #FFFFFF;
      box-shadow: 5px 0px 15px 0px rgba(224, 0, 0, 0.05);
      border-radius: 50px 50px 50px 50px;
      opacity: 1;
      margin-left: 260px;
      padding: 40px 75px;
      box-sizing: border-box;

      .findpassword-text {
        font-size: 18px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 28px;
      }

      .findpassword-bottom {
        // margin-top: 30px;

        .content-box {
          // margin-bottom: 20px;

          .content-text {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 21px;
            display: flex;
            align-items: center;

            .shu {
              width: 4px;
              height: 14px;
              background: #E00000;
              border-radius: 2px 2px 2px 2px;
              opacity: 1;
              margin-right: 6px;
            }
          }

          .content-box {
            width: 350px;
            height: 42px;
            border-radius: 10px 10px 10px 10px;
            opacity: 1;
            border: 1px solid #EDEDED;
          }
        }

        .huoqu-box {
          position: relative;

          .gain {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #E00000;
            line-height: 16px;
            position: absolute;
            right: 10px;
            top: 63px;
            cursor: pointer;
          }
        }
      }


    }

    .login-btn {
      width: 300px;
      height: 45px;
      background: linear-gradient(315deg, #E00000 0%, #FF2424 100%);
      border-radius: 22px 22px 22px 22px;
      opacity: 1;
      font-size: 15px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 45px;
      text-align: center;
      margin: 30px auto 0;
      cursor: pointer;

    }
  }

}

::v-deep .el-form-item__content {
  margin-left: 0px !important;
  line-height: normal !important;
  font-size: 18px !important;
}

::v-deep .el-form-item {
  margin-bottom: 0px !important;

}
</style>